<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="defaultKeyword.keyword"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <List :historyKeywordList="historyKeywordList" :hotKeywordList="hotKeywordList" v-show="page==1" @fn="fn" @list="list"></List>
    <Histpry v-show="page==2" :data="data" @fn="fn"></Histpry>
    <Product v-show="page==3" :filterCategory="filterCategory" :goodsList="goodsList"></Product>
  </div>
</template>

<script>
import List from "../components/popup/List.vue"
import Histpry from "../components/popup/Histpry.vue"
import Product from "../components/popup/Product.vue"
import { GetBaseurlList,GetHelperList,GetList } from "../request/api";
export default {
  components:{
    List,Histpry,Product
  },
  data() {
    return {
      value: "",
      defaultKeyword:{},
      historyKeywordList:[],
      hotKeywordList:[],
      page:1,
      data:[],
      filterCategory:[],
      goodsList:[]

    };
  },
  created() {
    GetBaseurlList().then((res) => {
      console.log(res);
      if (!res.errno == 0) return;
      this.defaultKeyword=res.data.defaultKeyword;
      this.historyKeywordList=res.data.historyKeywordList;
      this.hotKeywordList=res.data.hotKeywordList;

    });

    // console.log(localStorage.getItem("token"));
  },
  methods: {
    onSearch() {
      this.page=2;
      GetHelperList({
        keyword:this.value.trim()
      }).then(res=>{
        console.log(res.data);
        this.data=res.data
      })
    },
    onCancel() {
      //   Toast('取消');
      this.$router.push("/tabbar/home");
    },
    fn(val){
      GetList({
        keyword:val
      }).then(res=>{
        this.page=3;
        console.log("商品",res.data);
        this.filterCategory=JSON.parse(JSON.stringify(res.data.filterCategory).replace(/name/g,"text").replace(/id/g,"value"));
        this.goodsList=res.data.goodsList
      })
    },
    list(){
      this.historyKeywordList=""
    }
  },
};
</script>
 
<style lang = "less" scoped>
</style>